<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="featon inc." name="author">
  <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/vendor/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
  <link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="/static/vendor/skin/ftskin.css" rel="stylesheet">
  <link href="/static/vendor/webuploader/webuploader.css" rel="stylesheet" type="text/css">
  <link href="/static/vendor/datetimepicker/jquery.datetimepicker.css" rel="stylesheet">
  <title>添加(更新)蜂群</title>
  <style>
  </style>
</head>

<body style="margin-bottom: 60px;">

<div class="ft-subpage-wrapper container-fluid">
  <form action="#" id="form1" method="post" name="form1">
    <div class="row">
      <div class="col-lg-12" id="form_table">
        <fieldset>
          <legend id="titleText">-添加(更新)蜂群-</legend>
          <table cellpadding="0" cellspacing="0" class="form-table form-table-border" id="">
            <tr>
              <th><span class="f_red">*</span>蜂箱编号</th>
              <td colspan="3">
                <select class="form-control" id="boxNo" name="boxNo">
                  <option id="boxNo_val" disabled selected>--请选择--</option>
                </select>
                <span class="cError"></span>
              </td>
            </tr>
            <tr>
              <th><span class="f_red">*</span>蜂群种类</th>
              <td colspan="3">
                <select class="form-control" id="beeType" name="beeType">
                  <option disabled selected>--请选择--</option>
                  <option>弱群</option>
                  <option>中等群</option>
                  <option>强群</option>
                </select>
                <span class="cError"></span>
              </td>
            </tr>
            <tr>
              <th><span class="f_red">*</span>蜂群状态</th>
              <td colspan="3">
                <select class="form-control" id="beeStatus" name="beeStatus">
                  <option disabled selected id="beeStatus_val">--请选择--</option>
                </select>
                <span class="cError"></span>
              </td>
            </tr>
            <tr>
              <th><span class="f_red">*</span>经度坐标</th>
              <td colspan="3">
                <input class="form-control coordinate" id="longitude" name="longitude"  placeholder="" type="text"
                       value="">
                <span class="cError"></span>
              </td>
            </tr>
            <tr>
              <th><span class="f_red">*</span>纬度坐标</th>
              <td colspan="3">
                <input class="form-control coordinate" id="dimensions" name="dimensions"  placeholder="" type="text"
                       value="">
                <span class="cError"></span>
              </td>
            </tr>
            <tr>
              <th><span class="f_red">*</span>地址</th>
              <td colspan="3">
                <input class="form-control" id="address"  name="address" placeholder="" type="text"
                       value="">
                <span class="cError"></span>
              </td>
            </tr>
          </table>
        </fieldset>
        <div class="bottom-tools-box">
          <button class="btn btn-info" id="save_but" onclick="addAndUpdateObject()" type="button"><span
                  aria-hidden="true" class="glyphicon glyphicon-floppy-disk"></span> 保存
          </button>
          <button class="btn btn-warning" onclick="top.tab_colseOnclick();" type="button"><span
                  aria-hidden="true" class="glyphicon glyphicon-remove-circle"></span> 取消
          </button>
        </div>
      </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <!-- 地图盒子 -->
          <div id="allmap" style="height:600px"></div>
        </div>
      </div>
    </div>


  </form>
</div>
<input th:id="id" th:value="${beeId}" type="hidden"/>
<script src="/static/vendor/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendor/validate/jquery.validate.min.js" type="text/javascript"></script>
<script src="/static/vendor/webuploader/webuploader.js" type="text/javascript"></script>
<script src="/static/vendor/skin/js/ft-ui.js"></script>
<script src="/static/vendor/skin/js/jquery.c.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<script src="/static/vendor/sortable/sortable.js"></script>
<script src="/static/vendor/datetimepicker/jquery.datetimepicker.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?key=&v=1.3&services=true"></script>
<script>
  $("form input,form select").blur(function () {
    let siblings = $(this).siblings(".cError");
    $(siblings).empty();
    if ($(this).val().trim() === "" || $(this).val() === null) {
      $(siblings).append(`
            <span style="font-size: 12px;font-weight: bold;color: red">不能为空</span>
            `)
      $(this).focus();
    }
  })
  function iniInfoForm() {
    let validator = $("#form1").validate({
      debug: true,
      rules: {
        // user_realname: {
        //     required: true
        // },
        // dq_yw_name: {
        //     required: true
        // }
      },
      messages: {
        // user_realname: {
        //     required: "执法人员不能为空！"
        // },
        // dq_yw_name: {
        //     required: "所属地区不能为空"
        // }
      },
      errorPlacement: function (error, element) {
        error.appendTo(element.parents('td').find(".cError"));
      },
      submitHandler: function (form) {
      }
    });
  }

  let id = $("#id").val();
  $(function () {
    if (id !== null && id !== '') {
      $.get("/bs/getObjByArgs?beeId=" + id, function (result) {
        console.log(result[0].boxNo)
        $("#boxNo_val").text(result[0].boxNo).val(result[0].boxId);
        $("#beeType").val(result[0].beeType);
        $("#beeStatus_val").text(result[0].beeStatus);
        $("#longitude").val(result[0].longitude);
        $("#dimensions").val(result[0].dimensions);
        $("#address").val(result[0].address);
      })
    }
  })
  let is_submit = false;
  let url = "";
  if (id !== null && id !== '') {
    url = '/bs/updateBeeSwarm';
  } else {
    url = '/bs/addBeeSwarm';
  }

  function addAndUpdateObject() {
    let bean = {
      beeId: id,
      boxId: $("#boxNo").val(),
      beeType: $("#beeType").val(),
      beeStatus: $("#beeStatus").val(),
      longitude: $("#longitude").val(),
      dimensions: $("#dimensions").val(),
      address: $("#address").val(),
    }
    let submit = true;
    if (id ===null ||id === ''){
      for (let beanKey in bean) {
        let beanElement = bean[beanKey];
        if ((beanElement === null || beanElement === "") && beanKey !== "beeId") {
          submit = false;
          $("#" + beanKey).siblings(".cError").empty().append(`<span style="font-size: 12px;font-weight: bold;color: red">不能为空</span>`);
          return;
        }
      }
    }
    if (submit) {
    if (top.ajax.synclBody(url, bean)) {
      modelWindow.alert("蜂群信息" +top.CMSLang.Add_success);
      top.getCurrentFrameObj().loadListble();
      top.tab_colseOnclick();
    }else {
      modelWindow.error("蜂群信息" + top.CMSLang.Add_fail);
    }
    }
  }

  $("#boxNo").click(function () {
    let $that = $(this);
    let url = '/bh/getObjByArgs/';
    let children = $($that).children();
    if (children.length <= 1) {
      $("#boxNo_val").hide();
      $.get(url, function (result) {
        result.forEach((item) => {
          $($that).append(`
                    <option  value=` + item.boxId + `>` + item.boxNo + `</option>
                `)
        })
      })
    }
  })
  $("#beeStatus").focus(function () {
    let $that = $(this);
    let url = '/dictCategory/getDictList/bee_status';
    let children = $($that).children();
    if (children.length <= 1) {
      $("#beeStatus_val").hide();
      $.get(url, function (result) {
        result.forEach((item) => {
          $($that).append(`
                    <option value="` + item.dict_code + `">` + item.dict_name + `</option>
                `)
        })
      })
    }
  })

  $(".coordinate").focus(function () {
    $('#myModal').modal('show')
  })


  // 在指定容器创建地图实例并设置最大最小缩放级别
  var map = new BMap.Map("allmap", {
    minZoom: 5,
    maxZoom: 19
  });

  // 初始化地图，设置中心点和显示级别
  map.centerAndZoom(new BMap.Point(107.276394, 34.335655), 15);

  // 开启鼠标滚轮缩放功能，仅对PC上有效
  map.enableScrollWheelZoom(true);

  // 将控件（平移缩放控件）添加到地图上
  map.addControl(new BMap.NavigationControl());

  // 为地图增加点击事件，为input赋值
  var marker
  map.addEventListener("click", function(e) {
    document.getElementById('dimensions').value = e.point.lat;
    document.getElementById('longitude').value = e.point.lng;
    var point = new BMap.Point(e.point.lng,e.point.lat); //将标注点转化成地图上的点
    map.removeOverlay(marker);
    marker = new BMap.Marker(point); //将点转化成标注点
    map.addOverlay(marker);  //将标注点添加到地图上

  });
</script>
</body>

</html>
